<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 在您的HTML文件底部添加测试区域 -->
<div class="test-controls" style="margin-top: 30px; background: rgba(0,0,0,0.7); padding: 20px; border-radius: 10px;">
    <h2 class="section-title">迷宫生成测试</h2>
    <form id="mazeGenerateForm">
        <label for="mazeSize">迷宫大小:</label>
        <select id="mazeSize" name="size">
            <option value="15">15x15 (简单)</option>
            <option value="25">25x25 (中等)</option>
            <option value="35">35x35 (困难)</option>
        </select>
        <label for="mazeGen">迷宫生成算法:</label>
        <select id="mazeGen" name="gen">
            <option value="dfs"> 深度优先搜索</option>
            <option value="prim"> prim算法</option>
            <option value="kill">杀戮与狩猎</option>
            <option value="Kruskal">Kruskal算法</option>
            <option value="division">递归分割算法</option>
            <option value="Eller">Eller算法</option>
        </select>


        <button type="submit" class="btn" style="margin-top: 10px;">生成迷宫并保存到数据库</button>
    </form>
    <div id="responseArea" style="margin-top: 15px; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 5px;"></div>
</div>

<script>
    document.getElementById('mazeGenerateForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const responseArea = document.getElementById('responseArea');

        responseArea.innerHTML = '<p>正在生成迷宫并保存到数据库...</p>';

        try {
            const response = await fetch("{% url 'Labyrinth_app:labyrinth_sql_save' %}", {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            });

            const data = await response.json();

            if (data.status === 'success') {
                responseArea.innerHTML = `
                    <p>✅ 迷宫生成成功！</p>
                    <p>游戏ID: ${data.game_id}</p>
                    <p>迷宫大小: ${data.maze_size}x${data.maze_size}</p>
                    <p>难度: ${data.difficulty}</p>
                    <p>玩家数量: ${data.players_created}</p>
                `;
            } else {
                responseArea.innerHTML = `<p>❌ 错误: ${data.message || '未知错误'}</p>`;
            }
        } catch (error) {
            responseArea.innerHTML = `<p>❌ 网络错误: ${error.message}</p>`;
        }
    });
</script>

</body>
</html>

